<template>
    <div>
        <div v-fullpage:myFullpage="options">
            <!-- 第一屏 -->
            <div
                class="section"
                data-header="dark"
                :style="{
                    opacity: firstShow ? 1 : 0
                }"
            >
                <video
                    id="backVideo"
                    class="intro-bg"
                    loop
                    muted
                    autoplay
                    preload="auto"
                >
                    <!-- src="//cdn.zsdx.cn/wei/video/homeuse.mp4" -->
                    <source
                        src="//cdn.zsdx.cn/wxhand/wxhand_video.mp4"
                        type="video/mp4"
                    />
                </video>
                <div class="video-wrap"></div>
                <div class="section-inner intro-wrap">
                    <div class="intro-title">
                        企业的校园事业部
                    </div>
                    <div class="intro-subtitle">
                        专注高校7年，连续三轮融资，覆盖1800+所高校
                    </div>
                    <btn-join title="立即开通校园事业部" />
                    <div class="intro-body">
                        <div class="intro-unit">
                            <div class="intro-top">
                                <div
                                    class="intro-top-logo"
                                    style="background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/intro-logo1.png)"
                                ></div>
                                <div class="intro-top-title">
                                    事业部客户数
                                </div>
                            </div>
                            <div class="intro-bottom">
                                <div class="intro-bottom-number-wrap">
                                    <div
                                        id="countup0"
                                        class="intro-bottom-number"
                                    >
                                        0
                                    </div>
                                    <div class="intro-bottom-unit">家</div>
                                </div>
                                <div class="intro-bottom-desc">已入驻</div>
                            </div>
                        </div>
                        <div class="intro-unit">
                            <div class="intro-top">
                                <div
                                    class="intro-top-logo"
                                    style="background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/intro-logo2.png)"
                                ></div>
                                <div class="intro-top-title">
                                    高校覆盖
                                </div>
                            </div>
                            <div class="intro-bottom">
                                <div class="intro-bottom-number-wrap">
                                    <div
                                        id="countup1"
                                        class="intro-bottom-number"
                                    >
                                        0
                                    </div>
                                    <div class="intro-bottom-unit">所</div>
                                </div>
                                <div class="intro-bottom-desc">已覆盖</div>
                            </div>
                        </div>
                        <div class="intro-unit">
                            <div class="intro-top">
                                <div
                                    class="intro-top-logo"
                                    style="background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/intro-logo3.png)"
                                ></div>
                                <div class="intro-top-title">
                                    校园代理
                                </div>
                            </div>
                            <div class="intro-bottom">
                                <div class="intro-bottom-number-wrap">
                                    <div
                                        id="countup2"
                                        class="intro-bottom-number"
                                    >
                                        0
                                    </div>
                                    <div class="intro-bottom-unit">人</div>
                                </div>
                                <div class="intro-bottom-desc">
                                    校园精英代理
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 第一屏end -->
            <!-- 第二屏 描述轮播 -->
            <div
                class="section"
                data-header="dark"
                :style="{
                    'background-image': 'url(' + descBg + ')',
                    opacity: firstShow ? 1 : 0
                }"
            >
                <div class="section-inner desc-wrap">
                    <!-- 轮播图片 -->
                    <el-carousel
                        indicator-position="outside"
                        arrow="never"
                        trigger="hover"
                        height="4.9rem"
                        class="desc-carousel"
                    >
                        <el-carousel-item
                            v-for="(descImg, imgIndex) in bannerList"
                            :key="imgIndex"
                        >
                            <div class="desc-unit">
                                <div
                                    class="desc-unit-img"
                                    :style="{
                                        backgroundImage:
                                            'url(' + descImg.pic_url + ')'
                                    }"
                                    @click="fnJumpUrl(descImg.link_url)"
                                ></div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                    <btn-join title="抢先一步,开通校园事业部" />
                </div>
            </div>
            <!-- 第二屏 结束 -->
            <!-- 第三屏 我们的服务 -->
            <div
                class="section"
                data-header="dark"
                :style="{
                    'background-image': 'url(' + serviceBg + ')',
                    opacity: firstShow ? 1 : 1
                }"
            >
                <div class="section-inner service-wrap">
                    <div class="section-inner forth-section">
                        <div class="section-title">
                            <span>校园事业部3项核心服务</span>
                            <div class="section-title-bar"></div>
                        </div>

                        <div
                            :class="[
                                { turnUp: showResolve, 'gird-container': true }
                            ]"
                        >
                            <div class="next-item">
                                <div class="next-nav">
                                    <p class="next-nav-number">01</p>
                                    <p class="next-nav-title">校园推广服务</p>
                                </div>
                                <p class="next-title">
                                    线上推广
                                </p>
                                <p class="next-items">
                                    ·校园KOL/KOC朋友圈传播
                                </p>
                                <p class="next-items">
                                    ·社群私域推广
                                </p>
                                <p class="next-items">
                                    ·市场调研
                                </p>
                                <p class="next-title">
                                    线下推广
                                </p>
                                <p class="next-items">
                                    ·寝室推广
                                </p>
                                <p class="next-items">
                                    ·路演活动推广
                                </p>
                                <p class="next-items">
                                    ·线下硬广推广
                                </p>
                            </div>
                            <div class="next-item">
                                <div
                                    class="next-nav"
                                    :style="{ marginBottom: '40px' }"
                                >
                                    <p class="next-nav-number">02</p>
                                    <p class="next-nav-title">商品分销服务</p>
                                </div>
                                <p class="next-items">
                                    ·商城自然流量成交
                                </p>
                                <p class="next-items">
                                    ·校园代理PK赛成交
                                </p>
                                <p class="next-items">
                                    ·疯狂星期五活动
                                </p>
                                <p class="next-items">
                                    ·开学季/校园双11等重大节点活动
                                </p>
                            </div>
                            <div class="next-item">
                                <div class="next-nav">
                                    <p class="next-nav-number">03</p>
                                    <p class="next-nav-title">人力招聘服务</p>
                                </div>
                                <div class="__items">
                                    <p class="__items_title">
                                        远程兼职
                                    </p>
                                    <p class="__items_desc">
                                        翻译众包、设计众包、文案众包
                                    </p>
                                </div>
                                <div class="__items">
                                    <p class="__items_title">
                                        实习校招
                                    </p>
                                    <p class="__items_desc">
                                        暑期实习、毕业实习
                                    </p>
                                </div>
                                <div class="__items">
                                    <p class="__items_title">
                                        校内员工
                                    </p>
                                    <p class="__items_desc">
                                        新媒体运营、电商客服
                                    </p>
                                </div>
                            </div>
                        </div>
                        <btn-join title="抢先一步,开通校园事业部" />
                    </div>
                </div>
            </div>
            <!-- 第三屏 结束 -->
            <!-- 第四屏 -->
            <div
                class="section"
                data-header="dark"
                :style="{
                    backgroundImage: 'url(' + resolveBg + ')',
                    opacity: firstShow ? 1 : 0
                }"
            >
                <div class="section-inner forth-section">
                    <div class="section-title">
                        我们的解决方案
                    </div>

                    <div
                        :class="[
                            { turnUp: showResolve, 'gird-container': true }
                        ]"
                    >
                        <div
                            v-for="(ritem, rIndex) in resolveData"
                            :key="rIndex"
                            class="gird-item"
                        >
                            <p class="gird-sort">
                                {{ ritem.id }}
                            </p>
                            <p class="gird-title">
                                {{ ritem.title }}
                            </p>
                            <p class="gird-desc">
                                {{ ritem.intro }}
                            </p>
                            <p class="gird-subdesc">
                                {{ ritem.subIntro }}
                            </p>
                            <p class="btn-container-so">
                                <button-hover
                                    @action="
                                        fnGopage(
                                            ritem.action.url,
                                            ritem.action.param
                                        )
                                    "
                                />
                            </p>
                        </div>
                    </div>
                    <btn-join title="抢先一步,开通校园事业部" />
                </div>
            </div>
            <!-- 第四屏end -->
            <!-- 第五屏,品牌说 -->
            <div
                class="section"
                data-header="dark"
                :style="{
                    backgroundImage: 'url(' + resolveBg + ')',
                    opacity: firstShow ? 1 : 0
                }"
            >
                <div class="section-inner brands-wrap">
                    <div class="section-title">
                        <span>校园事业部客户说</span>
                        <div class="section-title-bar"></div>
                    </div>
                    <brand-show :show-more="true"></brand-show>
                    <btn-join title="抢先一步,开通校园事业部" />
                </div>
            </div>
            <!-- 第五屏end -->
            <!-- 第六屏核心功能与服务 -->
            <div
                class="section"
                data-header="default"
                :style="{
                    opacity: firstShow ? 1 : 0
                }"
            >
                <div class="section-inner function-wrap">
                    <div class="section-title">
                        <span>核心功能</span>
                        <div class="section-title-bar"></div>
                    </div>
                    <div class="function-main">
                        <div class="function-menus">
                            <div
                                v-for="(menu, mindex) in functionData"
                                :key="mindex"
                                class="function-menu"
                                :class="{ active: mindex == functionCurrent }"
                                @click="fnChangeFunctionIndex(mindex)"
                            >
                                {{ menu.menu }}
                            </div>
                            <button-hover @action="fnGopage('/product', {})" />
                        </div>
                        <div class="function-images">
                            <!-- 轮播图片 -->
                            <el-carousel
                                ref="functionCarousel"
                                indicator-position="none"
                                arrow="never"
                                trigger="hover"
                                height="4.4rem"
                                class="desc-carousel"
                                :autoplay="false"
                                @change="fnOnFunctionIndexChange"
                            >
                                <el-carousel-item
                                    v-for="(fitem, findex) in functionData"
                                    :key="findex"
                                >
                                    <div
                                        class="function-unit"
                                        :style="{
                                            backgroundImage:
                                                'url(' + fitem.bg + ')'
                                        }"
                                    >
                                        <div class="function-left">
                                            <div class="function-title">
                                                {{ fitem.title }}
                                            </div>
                                            <div class="function-desc">
                                                {{ fitem.desc }}
                                            </div>
                                            <div
                                                v-if="fitem.buttonLink"
                                                class="function-link"
                                                @click="
                                                    fnOpenPage(fitem.buttonLink)
                                                "
                                            >
                                                查看详情
                                            </div>
                                            <div
                                                v-if="fitem.codeImage"
                                                class="function-qrcode"
                                            >
                                                <img
                                                    class="function-qrcode-img"
                                                    :src="fitem.codeImage"
                                                    alt=""
                                                />
                                                <div
                                                    class="function-qrcode-tip"
                                                >
                                                    扫码下载APP
                                                </div>
                                            </div>
                                        </div>
                                        <div
                                            class="function-right"
                                            :class="{
                                                'function-right-special':
                                                    fitem.special
                                            }"
                                            :style="{
                                                backgroundImage:
                                                    'url(' + fitem.image + ')'
                                            }"
                                        ></div>
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                    <btn-join title="抢先一步,开通校园事业部" />
                </div>
            </div>
            <!-- 第六屏end -->
            <!-- 第七屏品牌商家入驻 -->
            <div
                class="section"
                data-header="default"
                :style="{
                    opacity: firstShow ? 1 : 0
                }"
            >
                <div class="section-inner company-wrap">
                    <div class="company-title">
                        <div class="company-title-number">3000+</div>
                        <div class="company-title-text">客户已开通</div>
                    </div>
                    <company></company>
                    <btn-join title="抢先一步,开通校园事业部" />
                </div>
            </div>
            <!-- 第七屏end -->

            <!-- 第八屏里程碑 -->
            <div
                class="section"
                data-header="dark"
                :style="{
                    opacity: firstShow ? 1 : 0,
                    backgroundImage: 'url(' + milepostBg + ')'
                }"
            >
                <div class="milepost-wrap">
                    <div class="milepost-title">七年深耕校园,斩获多项荣誉</div>
                    <events></events>
                    <btn-join title="抢先一步,开通校园事业部" />
                    <div style="width:100%;height:35%;background:#02050A">
                        <foot></foot>
                    </div>
                </div>
            </div>
            <!-- 第八屏end -->
        </div>
    </div>
</template>

<script>
import buttonHover from '@/components/common/button-hover'
import brandShow from '@/components/brands/brand-show'
import events from '@/components/index/events'
import foot from '@/components/foot/footer'
import company from '@/components/brands/company'
import checkReg from '@/assets/js/mixin/checkReg'
import btnJoin from '@/components/common/btn-join'
export default {
    components: { buttonHover, brandShow, events, foot, company, btnJoin },
    mixins: [checkReg],
    data() {
        return {
            loadTime: 0,
            options: {
                licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
                navigation: false,
                scrollBar: false,
                scrollOverflow: true,
                paddingTop: '70px',
                anchors: [
                    'intro',
                    'desc',
                    'service',
                    'resolve',
                    'brands',
                    'functions',
                    'company',
                    'milepost'
                ],
                css3: true,
                controlArrows: false,
                afterLoad: this.afterLoad,
                onLeave: this.onLeave,
                afterResize(...args) {
                    // console.log('resize', args)
                }
            },
            bannerList: [],
            introData: {
                company_count: 0,
                agent_count: 0,
                school_count: 0
            },
            introBg:
                '//cdn.zsdx.cn/zsdx-website/2020/images/index/intro-bg.png',
            // introShow: false,
            firstShow: false,
            descImages: [
                '//cdn.zsdx.cn/zsdx-website/2020/images/index/desc-1.png',
                '//cdn.zsdx.cn/zsdx-website/2020/images/index/desc-2.png'
            ],
            descBg: '//cdn.zsdx.cn/zsdx-website/2020/images/index/intro-bg.png',
            serviceBg:
                '//cdn.zsdx.cn/zsdx-website/2020/images/index/intro-bg.png',
            // descShow: false,
            serviceSchools: [
                {
                    src:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon51png.png',
                    className: 'schoolIconNormal firstIcon'
                },
                {
                    src:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon31.png',
                    className: 'schoolIconNormal secondIcon'
                },
                {
                    src:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon52.png',
                    className: 'schoolIconNormal thirdIcon'
                },
                {
                    src:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon32.png',
                    className: 'schoolIconNormal forthIcon'
                },
                {
                    src:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon36.png',
                    className: 'schoolIconNormal fifthIcon'
                },
                {
                    src:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon33.png',
                    className: 'schoolIconNormal sixthIcon'
                },
                {
                    src:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon45.png',
                    className: 'schoolIconNormal seventhIcon'
                },
                {
                    src:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon37.png',
                    className: 'schoolIconNormal eighthIcon'
                }
                // {
                //     src:
                //         '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon44.png',
                //     className: 'schoolIconNormal ninthIcon'
                // },
                // {
                //     src:
                //         '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon35.png',
                //     className: 'schoolIconNormal tenthIcon'
                // }
            ],
            resolveBg:
                '//cdn.zsdx.cn/zsdx-website/2020/images/index/resolveBg.jpg',
            showResolve: false,
            resolveData: [
                {
                    id: '01',
                    title: '流量',
                    intro: '帮企业产品上架到每所高校的校园商城',
                    action: {
                        url: '/solutions',
                        param: 1
                    }
                },
                {
                    id: '02',
                    title: '转化',
                    intro: '每个品牌将会在每所学校匹配多个校园代理',
                    action: {
                        url: '/solutions#transform',
                        param: 2
                    }
                },
                {
                    id: '03',
                    title: '品牌',
                    intro: '不错过学生的每个特色节日',
                    subIntro:
                        '开学季 女生节 520 毕业季 双11 双12    圣诞节 元旦节 ……',
                    action: {
                        url: '/solutions#effect',
                        param: 3
                    }
                }
            ],
            functionData: [
                {
                    menu: '“学生价”校园商城旗舰店',
                    title: '掌上大学APP',
                    desc: '企业的校园事业部,让全球在校大学生成为精英的互动平台',
                    bg:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/function-bg1.png',
                    special: true,
                    image: '//cdn.zsdx.cn/student-app/images/zsdx_logo2.png',
                    codeImage:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/common/downloadQRCode.png'
                },
                {
                    menu: '2000+所校园新媒体资源',
                    title: '媒体系统',
                    desc: '全国2400所高校媒介资源，行业成本价投放',
                    buttonLink: '//cms.zsdx.cn/resource?no=',
                    bg:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/function-bg2.png',
                    image:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/function-detail2.png'
                },
                {
                    menu: '覆盖全国近10万校园KOC',
                    title: '覆盖近10万校园KOC',
                    desc: '每个商品都会有很多的学生成为代理进行销售',
                    bg:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/function-bg3.png',
                    image:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/function-detail3.png'
                },
                {
                    menu: '全终端大学生用户2200万+',
                    title: '大学生用户3000万+',
                    desc: '覆盖广  数量多  数据全',
                    bg:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/function-bg4.png',
                    image:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/function-detail4.png'
                },
                {
                    menu: '每周一次校园节日主题活动',
                    title: '校园节日主题活动',
                    desc: '商城不定时的举行各种校园节日活动',
                    bg:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/function-bg4.png',
                    image:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/function-detail5.png'
                }
            ],
            functionCurrent: 0,
            milepostBg:
                '//cdn.zsdx.cn/zsdx-website/2020/images/index/milepost-bg.png'
        }
    },
    created() {
        if (!process.server) {
            this.$store.commit('header/setStyle', 'dark')
            this.fnGetBanner()
        }
    },
    beforeDestroy() {
        this.firstShow = false
    },
    mounted() {
        this.getIndexData()
        this.loadTime = new Date().getTime()
        this.firstShow = true
    },
    methods: {
        fnGoReg() {},
        onLeave(from, to, direction) {
            this.firstShow = true
            if (to.item.dataset.header == 'dark') {
                this.$store.commit('header/setStyle', 'dark')
            } else {
                this.$store.commit('header/setStyle', 'default')
            }
        },
        afterLoad(from, to, direction) {
            this.firstShow = true
            if (to.index == 1) {
                const video = document.getElementById('backVideo')
                video.play()
                const CountUp = require('countup.js').CountUp
                const count0 = new CountUp(
                    'countup0',
                    this.introData.company_count,
                    {
                        duration: 1
                    }
                )
                const count1 = new CountUp(
                    'countup1',
                    this.introData.school_count,
                    {
                        duration: 1
                    }
                )
                const count2 = new CountUp(
                    'countup2',
                    this.introData.agent_count,
                    {
                        duration: 1
                    }
                )

                count0.start()
                count1.start()
                count2.start()
            }
            if (to.index == 3 || to.index == 2) {
                this.showResolve = true
            }
            // console.log(to)
            // if (to.index == 0) {
            //     this.introBg =
            //         '//cdn.zsdx.cn/zsdx-website/2020/images/index/intro-bg.png'
            //     this.introShow = true
            // } else if (to.index == 1) {
            //     this.descShow = true
            //     this.descBg =
            //         '//cdn.zsdx.cn/zsdx-website/2020/images/index/intro-bg.png'
            // }
        },
        fnChangeFunctionIndex(index) {
            // this.functionCurrent = index
            this.$refs.functionCarousel.setActiveItem(index)
        },
        fnOnFunctionIndexChange(index) {
            this.functionCurrent = index
        },
        fnGetBanner() {
            this.$post('/Index/getBannerList', {}).then((resp) => {
                if (resp.code == 1) {
                    this.bannerList = resp.data
                }
            })
        },
        fnGopage(url, query) {
            this.$router.push({ path: url, query })
        },
        fnOpenPage(url) {
            window.open(url)
        },
        getIndexData() {
            this.$post('/Index/getStat', {}).then((resp) => {
                if (resp.code == 1) {
                    this.introData = resp.data
                    this.$nextTick(() => {
                        const CountUp = require('countup.js').CountUp
                        const count0 = new CountUp(
                            'countup0',
                            this.introData.company_count,
                            {
                                duration: 1
                            }
                        )
                        const count1 = new CountUp(
                            'countup1',
                            this.introData.school_count,
                            {
                                duration: 1
                            }
                        )
                        const count2 = new CountUp(
                            'countup2',
                            this.introData.agent_count,
                            {
                                duration: 1
                            }
                        )

                        count0.start()
                        count1.start()
                        count2.start()
                    })
                }
            })
        },
        fnJumpUrl(url) {
            if (!url) return false
            window.open(url)
        }
    }
}
</script>
<style lang="less"></style>
<style lang="less" scoped>
.section {
    opacity: 0;
    transition: opacity ease-in 0.3s;
    background-color: #fff;
}
.video-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
}
.intro-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-size: 100% 100%;
    background-color: black;
    background-position: center center;
    background-size: contain;
    object-fit: cover;
    z-index: 0;
}
.intro-wrap {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    .intro-title {
        height: 78px;
        font-size: 78px;
        font-weight: 300;
        color: rgba(255, 255, 255, 1);
        line-height: 78px;
    }
    .intro-subtitle {
        margin-top: 32px;
        height: 30px;
        font-size: 30px;
        font-weight: 300;
        color: rgba(255, 255, 255, 1);
        line-height: 30px;
    }
}
.section-title {
    height: 0.45rem;
    font-size: 0.35rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    line-height: 0.4rem;
    position: relative;
    margin-top: 0.3rem;
    display: inline-block;
    flex-shrink: 0;
    &-bar {
        width: 140px;
        height: 4px;
        background: rgba(207, 152, 0, 1);
        border-radius: 2px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}
.intro-body {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 90px;
}
.intro-unit {
    width: 30%;
    padding: 32px;
    background: rgba(255, 255, 255, 0.1);
    .intro-top {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .intro-top-logo {
        width: 32px;
        height: 32px;
        border-radius: 32px;
        background-image: url(//);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        margin-right: 16px;
    }
    .intro-top-title {
        height: 24px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 24px;
    }
    .intro-bottom {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .intro-bottom-number-wrap {
        display: flex;
        align-items: flex-end;
        padding: 50px 12px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    }
    .intro-bottom-numbe {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .intro-bottom-number {
        display: inline-block;
        height: 50px;
        font-size: 50px;
        font-weight: normal;
        color: rgba(250, 222, 47, 1);
        line-height: 50px;
        margin-right: 4px;
    }
    .intro-bottom-unit {
        height: 30px;
        font-size: 20px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.87);
        line-height: 30px;
    }
    .intro-bottom-desc {
        height: 20px;
        font-size: 20px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.87);
        line-height: 20px;
        margin-top: 10px;
        text-align: center;
    }
}
.desc-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 6.5rem;
    .desc-carousel {
        width: 100%;
    }
    .desc-unit {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .desc-unit-img {
        width: 10rem;
        height: 4.9rem;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

.service-wrap {
    width: 100%;
    margin: 0.2rem auto 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .service-title {
        background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/service-title.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        width: 190px;
        height: 54px;
        margin-bottom: -20px;
    }
    .service-main {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .service-left {
        width: 6rem;
        height: 6rem;
        position: relative;
        flex-shrink: 0;
        margin-left: 0.2rem;
    }
    .service-circle1 {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        animation: rotate 170s 0s linear infinite;
    }
    .service-circle2 {
        width: 88%;
        height: 88%;
        position: absolute;
        left: 6%;
        top: 6%;
        // transform: translate(-50%, -50%);
        box-sizing: border-box;
        transform-origin: 50% 50%;
        animation: rotateReverse 160s 0s linear infinite;
    }
    .service-circle3 {
        width: 80%;
        height: 80%;
        position: absolute;
        left: 10%;
        top: 10%;
        // transform: translate(-50%, -50%);
        background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/service-map-circle.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        animation: rotate 150s 0s linear infinite;
    }
    .circle-title {
        height: 32px;
        background: rgba(255, 255, 255, 0.37);
        border-radius: 16px;
        padding: 0 23px;
        font-size: 16px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 32px;
        position: absolute;
        left: 50%;
        top: 25.65%;
        transform: translateX(-50%);
        z-index: 100;
    }
    .service-map {
        width: 67.54%;
        height: 79.57%;
        position: absolute;
        top: 24.2%;
        left: 13.48%;
        background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/service-map3.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .servie-map-inner {
        width: 67.54%;
        height: 55.8%;
        position: absolute;
        top: 24.2%;
        left: 13.48%;
    }
    .service-map-school {
        position: absolute;
        width: 30px;
        height: 30px;
        left: 0;
        top: 0;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .service-right {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        margin-left: 0.2rem;
    }
    .service-sub-title {
        // width: 5.2rem;
        width: 100%;
        height: 1.1rem;
        text-align: center;
        // background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/service-subtitle.png);
        // background-position: center;
        // background-size: contain;
        // background-repeat: no-repeat;
        margin-top: 0.5rem;
        &-head {
            color: #fff;
            font-size: 0.3rem;
            text-align: center;
        }
        &-desc {
            color: #fff;
            font-size: 0.14rem;
            margin-top: 0.3rem;
            text-align: center;
        }
    }
    .service-detail {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 0.32rem;
    }
    .service-detail-unit {
        width: 2.46rem;
        background: rgba(255, 255, 255, 0.07);
    }
    .service-detail-unit-top {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 1.56rem;
        background: rgba(255, 255, 255, 0.08);
    }
    .service-detail-top-logo {
        width: 0.5rem;
        height: 0.5rem;
        background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/service-logo.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .service-detail-top-splider {
        width: 0.18rem;
        height: 0.18rem;
        background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/service-unit-splid.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        margin: 0 0.1rem;
    }
    .service-detail-top-number-wrap {
        display: flex;
        align-items: flex-end;
        .service-detail-top-number {
            height: 0.52rem;
            font-size: 0.53rem;
            font-family: 'din alternate bold';
            color: rgba(255, 255, 255, 1);
            line-height: 0.53rem;
            margin-right: 4px;
        }
        .service-detail-top-unit {
            height: 0.18rem;
            font-size: 16px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 0.18rem;
        }
    }

    .service-detail-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        .service-detail-bottom-title {
            padding-top: 0.24rem;
            text-align: center;
            font-size: 28px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 0.28rem;
        }
        .service-detail-bottom-number {
            padding-top: 0.16rem;
            text-align: center;
            font-size: 28px;
            font-weight: normal;
            color: rgba(250, 222, 47, 1);
            line-height: 0.28rem;
            padding-bottom: 0.2rem;
        }
    }
    .service-splider {
        width: 83px;
        height: 58px;
        background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/service-splid.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        margin: 0 24px;
    }
    .schoolIconNormal {
        display: block;
        position: absolute;
        width: 30px;
        height: 30px;
        border-radius: 15px;
        box-shadow: 0 2px 8px 0 rgba(32, 160, 25, 0.2);
        animation: twinkle 2s 0s ease-in-out infinite;
    }
    .firstIcon {
        top: 62%;
        left: 83%;
        animation-delay: 0.3s;
    }
    .secondIcon {
        top: 60%;
        left: 68%;
        animation-delay: 0.6s;
    }
    .thirdIcon {
        top: 35%;
        left: 73%;
        animation-delay: 0.9s;
    }
    .forthIcon {
        top: 80%;
        left: 70%;
        animation-delay: 1.2s;
    }
    .fifthIcon {
        top: 75%;
        left: 80%;
        animation-delay: 0.8s;
    }
    .sixthIcon {
        top: 63%;
        left: 50%;
        animation-delay: 0s;
    }
    .seventhIcon {
        top: 44%;
        left: 80%;
        animation-delay: 1.3s;
    }
    .eighthIcon {
        top: 36%;
        left: 18%;
    }
    .ninthIcon {
        top: 35.5vh;
        left: 16vw;
    }
    .tenthIcon {
        top: 38.6vh;
        left: 31.9vw;
    }
}

@keyframes twinkle {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.6);
    }
    100% {
        transform: scale(0.8);
    }
}

// 第四屏
.forth-section {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .section-title {
        font-size: 38px;
        font-weight: 300;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        margin-bottom: 0.45rem;
    }
    .gird-container {
        height: 510px;
        position: relative;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        text-align: center;
        font-size: 0;
        opacity: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .gird-item {
            width: 371px;
            height: 480px;
            display: inline-block;
            padding-left: 30px;
            padding-right: 80px;
            padding-top: 80px;
            padding-bottom: 66px;
            position: relative;
            background: rgba(0, 0, 0, 0.21);
            transition: all ease-in-out 0.3s;
            &:nth-of-type(2n + 1) {
                margin-left: 40px;
                margin-right: 40px;
            }
            &:after {
                position: absolute;
                content: '';
                right: -30px;
                top: 50%;
                width: 0;
                height: 0;
                border-width: 15px;
                border-style: solid;
                border-color: transparent rgba(0, 0, 0, 0.21) transparent
                    transparent;
                transform: rotate(180deg);
            }
            &:hover {
                height: 510px;
                // transform: translateY(-15px);
                background: linear-gradient(
                    180deg,
                    rgba(108, 212, 255, 1) 0%,
                    rgba(3, 148, 255, 1) 100%
                );
                &:after {
                    border-color: transparent #39b5ff transparent transparent;
                }
                .gird-sort {
                    opacity: 1;
                }
                .gird-title {
                    opacity: 1;
                }
                .gird-desc {
                    opacity: 1;
                }
                .gird-subdesc {
                    opacity: 1;
                }
                .btn-container-so {
                    opacity: 1;
                    bottom: 50px;
                }
            }
            .gird-sort {
                width: 44px;
                height: 60px;
                font-size: 50px;
                font-family: BebasNeue-Regular, BebasNeue;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                text-align: left;
                opacity: 0.8;
            }
            .gird-title {
                font-size: 50px;
                font-weight: 600;
                color: rgba(255, 255, 255, 1);
                padding: 7px 0 50px 0;
                text-align: left;
                opacity: 0.8;
            }
            .gird-desc {
                font-size: 20px;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                line-height: 28px;
                text-align: left;
                opacity: 0.5;
            }
            .gird-subdesc {
                font-size: 14px;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                line-height: 22px;
                opacity: 0.5;
                text-align: left;
                margin-top: 12px;
            }
            .btn-container-so {
                position: absolute;
                text-align: left;
                bottom: 46px;
                left: 30px;
                opacity: 0.5;
                transition: 0.3s;
            }
        }
        .next-item {
            width: 371px;
            height: 480px;
            display: inline-block;
            padding-left: 0px;
            padding-right: 0px;
            padding-top: 0px;
            padding-bottom: 0px;
            position: relative;
            background: rgba(0, 0, 0, 0.3);
            transition: all ease-in-out 0.3s;
            &:nth-of-type(2n + 1) {
                margin-left: 40px;
                margin-right: 40px;
            }
            &:after {
                position: absolute;
                content: '';
                right: -30px;
                top: 2%;
                width: 0;
                height: 0;
                border-width: 15px;
                border-style: solid;
                border-color: transparent rgba(0, 0, 0, 0.21) transparent
                    transparent;
                transform: rotate(180deg);
            }
            &:hover {
                height: 510px;
                // transform: translateY(-15px);
                background: linear-gradient(
                    180deg,
                    rgba(36, 181, 240, 1) 0%,
                    rgba(18, 63, 217, 1) 100%
                );
                &:after {
                    border-color: transparent #39b5ff transparent transparent;
                }
                .gird-sort {
                    opacity: 1;
                }
                .gird-title {
                    opacity: 1;
                }
                .gird-desc {
                    opacity: 1;
                }
                .gird-subdesc {
                    opacity: 1;
                }
                .btn-container-so {
                    opacity: 1;
                    bottom: 50px;
                }
            }
            .next-nav {
                width: 100%;
                height: 90px;
                box-sizing: border-box;
                border-bottom: 1px rgba(255, 255, 255, 0.14) solid;
                display: flex;
                align-items: center;
                padding-left: 30px;
                .next-nav-number {
                    color: rgba(250, 222, 47, 1);
                    font-size: 40px;
                    font-weight: 500;
                    margin-right: 8px;
                    font-family: BebasNeue;
                }
                .next-nav-title {
                    color: rgba(255, 255, 255, 0.8);
                    font-size: 30px;
                    font-weight: 600;
                    white-space: nowrap;
                }
            }
            .next-title {
                height: 33px;
                line-height: 33px;
                color: rgba(255, 255, 255, 0.8);
                font-size: 24px;
                font-weight: 500;
                margin: 40px 0 8px 40px;
                text-align: left;
            }
            .next-items {
                color: rgba(255, 255, 255, 0.8);
                font-size: 18px;
                line-height: 32px;
                margin-left: 40px;
                text-align: left;
            }
            .__items {
                margin-left: 40px;
                margin-top: 40px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                .__items_title {
                    color: rgba(255, 255, 255, 0.8);
                    font-size: 24px;
                    font-weight: 500;
                    height: 33px;
                    line-height: 33px;
                    margin-bottom: 8px;
                }
                .__items_desc {
                    color: rgba(255, 255, 255, 0.8);
                    font-size: 18px;
                    height: 32px;
                    line-height: 32px;
                    white-space: nowrap;
                }
            }
        }
    }
    .turnUp {
        animation: turnUp 0.6s ease-out;
        opacity: 1;
    }
}
.brands-wrap,
.function-wrap,
.company-wrap,
.milepost-wrap {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.company-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.4rem;
    font-weight: 600;
    color: rgba(96, 105, 114, 1);
    line-height: 0.4rem;
    margin-top: 0.4rem;
    &-number {
        color: #fe6600;
        margin-right: 10px;
    }
}
.function-wrap {
    .section-title {
        color: #1d2023;
    }
}
.function-main {
    width: 100%;
    margin-top: 0.25rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    .function-menus {
        flex: 1;
        height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .function-menu {
        height: 72px;
        line-height: 72px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(63, 69, 75, 1);
        text-align: center;
        cursor: pointer;
        &.active {
            color: #20a0ff;
        }
    }
    .function-images {
        width: 55%;
        // min-width: 900px;
    }
    .function-unit {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .function-right {
        position: absolute;
        right: 0;
        top: 15.6%;
        width: 65.6%;
        height: 68.77%;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        &-special {
            width: 43%;
            height: 76.6%;
            right: 4.3%;
        }
    }
    .function-left {
        flex: 1;
        margin-left: 40px;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .function-title {
        height: 34px;
        font-size: 34px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 34px;
    }
    .function-desc {
        height: 22px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 22px;
        margin-top: 28px;
        max-width: 28%;
    }
    .function-link {
        margin-top: 28px;
        width: 115px;
        height: 36px;
        background: rgba(255, 255, 255, 1);
        border-radius: 18px;
        font-size: 14px;
        font-weight: 500;
        color: rgba(32, 160, 255, 1);
        line-height: 36px;
        text-align: center;
        cursor: pointer;
    }
    .function-qrcode {
        margin-top: 58px;
        &-img {
            width: 120px;
            height: 120px;
            border: 5px solid rgba(255, 255, 255, 0.2);
            box-sizing: border-box;
        }
        &-tip {
            margin-top: 10px;
            width: 120px;
            height: 20px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 20px;
        }
    }
}

.milepost-wrap {
    padding-top: 50px;
}
.milepost-title {
    margin: 0 auto 0.24rem;
    height: 37px;
    font-size: 26px;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 37px;
}

@keyframes turnUp {
    0% {
        transform: translateY(500px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes turnDown {
    0% {
        transform: translateY(-500px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes btn-scale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale3d(1.06, 1.06, 0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotateReverse {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(-180deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}
</style>
